<template>
  <div>
    <div>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="(carouselData, index) in this.carouselData" :key="index">
            <img :src="carouselData['src']" class="top_image" alt="404">
          </el-carousel-item>
        </el-carousel>
    </div>
    <div style="padding: 50px;text-align: center">
      <h1>测试课程</h1>
      <span style="margin: auto;width: 80% ;color: #999999">精选课程，满足你的学习兴趣</span>
    </div>
<!--卡片部分-->
    <div>
      <el-row :gutter="30" type="flex" class="card_flex">
        <el-col :span="25" v-for="(allData, index) in this.allData" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" >
            <img :src="allData['course_fengmian']" alt="404" class="card_img">
            <div class="el_card_footer_sty">
              <span class="el_card_footer_span_sty">{{ allData['course_name'] }}</span>
                <div class="bottom clearfix">
                  <time class="time el_card_footer_span_sty">{{ allData['course_startDate'] }}</time>
                  <el-button type="text" class="button" @click.native="getCourseData(index)">详情</el-button>
                </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
<!--    详情弹窗-->
    <div>
      <el-dialog :visible.sync="dialogTableVisible" width="70%">
        <div>
          <el-card class="box-card">
            <div>
              <el-image :src="this.courseData[0]['course_fengmian']" style="width: 50%;height: 200px;padding: 20px"></el-image>
              <div style="position: absolute;left: 55%;top: 80px">
                <h1>{{this.courseData[0].course_name}}(小白必备)</h1>
                {{this.courseData[0].course_name}}<br>
                <div style="padding: 20px; background-color: #f9f9f9">
                  价格
                  <span><b style="margin-left: 20px;font-size: 28px;color: #ff5c3b">199.9</b>元</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div>
          <div>
            <el-card class="box-card" style="width: 60%; margin-top: 20px">
              <div slot="header" class="clearfix">
                <span>课程简介</span>
                <el-button style="float: right; padding: 3px 0" type="text">报名</el-button>
              </div>
              <div class="text item">
                <span>课程名称：{{this.courseData[0].course_name}}</span><br>
                <span>开课日期：{{this.courseData[0].course_startDate}}</span><br>
                <span>结课日期：{{this.courseData[0].course_endDate}}</span><br>
                <span v-if="courseData[0].open===true">课程状态：已开课</span>
                <span v-else>课程状态：未开课</span>
              </div>
            </el-card>
          </div>
          <div style="position: absolute;left: 64%;top: 347px;margin-top: 20px">
            <el-card class="box-card" style="width: 350px">
              <div slot="header" class="clearfix">
                <span>任课老师</span>
              </div>
              <div class="text item">
                <div style="margin-right: 10px;float: left"><el-avatar shape="square" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar></div>
                <div style="margin: 10px;"><span>{{this.courseData[0].course_teacher}}</span><br>资深教师</div>
              </div>
            </el-card>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible:false,
      dialogTitle:'',
      allData:[],
      courseData:[{
        id:'',
        course_name:'',
        course_teacher: '',
        course_startDate:'',
        course_endDate:'',
        open:false,
        course_fengmian:'',
      }],
      carouselData:[
        {src:'https://img1.baidu.com/it/u=1449467623,3459128431&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'},
        {src:'https://img0.baidu.com/it/u=604444338,2767868618&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'}
      ]
    };
  },
  mounted() {
    this.getCourseInfo()
  },
  methods: {
    // 获取页面课程信息
    getCourseInfo() {
      this.$axios.get('/api/course/info',{
      }).then((response)=>{
        var res = response.data
        if (res['respCode']==='000000') {
          this.allData = res['list']
          this.dialogTitle=res['list'][0]['course_name']
          console.log(res['list'])
        }else {
          console.log(res['list'])
          console.log(res['respMsg'])
        }
      })
    },
    // 获取当前课程信息 详情按钮
    getCourseData(index) {
        this.dialogTableVisible=true
        this.$axios.get('/api/course/info',{
          params:{id:this.allData[index]['id']}
        }).then((response)=>{
          var res = response.data
          if (res['respCode']==='000000') {
            this.courseData = res['list']
            console.log(this.courseData)
          }else {
            console.log(res['respMsg'])
          }
        })
    },
  },
}
</script>

<style scoped>
.el-col-25{
  width: 20%;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.top_image {
  width: 100%;
  display: block;
}

.el-card {
  margin-bottom: 20px;
  border-radius: 20px;
}

.card_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
.el_card_footer_sty {
  background: black;
  padding: 14px;
}
.el_card_footer_span_sty {
  color: white;
  font-size: 10px;
}
.el-link.el-link--default:hover{
  color: #ebb563 !important;
}
.el-link.el-link--default {
  color: white;
  font-size: 15px;
}
.card_img {
  width: 100%;
  height: 240px;
}
</style>
